/* 表示引入模块中的内容要使用 ~ */
@import "~normalize.css";
@import "~antd/dist/antd.css";

/* 样式的重置 */
body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
header,
menu,
section,
p,
input,
td,
th,
ins {
  padding: 0;
  margin: 0;
}

/* list-style CSS 属性是一个简写对属性集合，包括 list--style-type, list-style-image
   list-style-position
   none 不显示列表项的标记 */
ul,
ol,
li {
  list-style: none;
}

/* 去掉下划线 */
a {
  text-decoration: none;
  color: #666;
}

/* 鼠标经过显示下划线 */
a:hover {
  color: #666;
  text-decoration: underline;
}

/* font-style CSS 属性允许你选择 font-family 字体下的 italic 或者 oblique 样式
   normal 选择 font-family 的常规字体
   italic 选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体替代
   oblique 选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体替代 */
i,
em {
  font-style: normal;
}

/* outline 属性是一条声明中设置多个轮廓属性的简写属性，例如 outline-style outline-width
   outline-color
   border 和 outline 很类似，但有如下区别
   1. 轮廓不占据空间，绘制于元素内容周围
   2. 根据规范，轮廓通常是矩形，但也可以是非矩形的*/
input,
textarea,
button,
select,
a {
  outline: none;
  border: none;
}

/* border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。
   在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框
   border-spacing 属性指定相邻单元格边框之间的距离 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* CSS 的属性 vertical-align 用来指定行内元素（inline）
   或表格单元格（table-cell）元素的垂直对齐方式 */
img {
  border: none;
  vertical-align: middle;
}

/* 全局样式 */
body,
textarea,
select,
input,
button {
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5f5f5;
}

.text-nowrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 一级标题 */
.wrap-v1 {
  width: 1100px;
  margin: 0 auto;
}

.wrap-v2 {
  width: 980px;
  margin: 0 auto;
}

/* 此属性是一个 简写属性，可以在一次声明中定义一个或多个属性：background-clip、
background-color、background-image、background-origin、
background-position、background-repeat、background-size，
和 background-attachment 

background-repeat CSS 属性定义背景图像的重复方式。
背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复
background-attachment CSS 属性决定背景图像的位置是在视口内固定，
或者随着包含它的区块滚动*/
.sprite_01 {
  background: url(../img/sprite_01.png) no-repeat 0 9999px;
}

.sprite_02 {
  background: url(../img/sprite_02.png) no-repeat 0 9999px;
}

.sprite_cover {
  background: url(../img/sprite_cover.png) no-repeat 0 9999px;
}

.sprite_icon {
  background: url(../img/sprite_icon.png) no-repeat 0 9999px;
}

.sprite_icon2 {
  background: url(../img/sprite_icon2.png) no-repeat 0 9999px;
}

.sprite_button {
  background: url(../img/sprite_button.png) no-repeat 0 9999px;
}

.sprite_button2 {
  background: url(../img/sprite_button2.png) no-repeat 0 9999px;
}

.sprite_table {
  background: url(../img/sprite_table.png) no-repeat 0 9999px;
}

.image_cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-indent: -9999px;
  background: url(../img/sprite_cover.png) no-repeat -145px -57px;
}

.sprite_player {
  background: url(../img/playbar_sprite.png) no-repeat 0 9999px;
}

.lyric-class .ant-message-notice-content {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
}

.sprite_playlist {
  background: url(../img/playlist_sprite.png) no-repeat 0 9999px;
}